The DropDown control in the AJAX Control Toolkit offers a simple way to create a drop down at client-side.
We use this control default syntax is added on the aspx page
<cc1:DropDownExtender ID="DropDownExtender1" runat="server">
</cc1:DropDownExtender>
DropDownExtender Properties:
- TargetControl ID - The ID of the control which needs a drop down.·
- DropDownControl ID – The ID of the control which will be displayed as the dropdown.
Code:
<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages and use drpdown extender--%>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="LinkButton1" DropDownControlID="Panel1">
</cc1:DropDownExtender>
<%--DropDownExtender focus on the linkbutton1 and panel1 and use the table which show the data when selected from the dropdown list--%>
<asp:LinkButton ID="LinkButton1" runat="server">show job id</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" Style="display: none"Width="668px">
<div>
<p style="text-align: center">
<table width="100%">
<tr>
<td style="width: 100px; font-size: 10pt; font-family: Verdana; background-color: silver;font-weight: bold;"> JobID</td>
<td style="width: 100px; font-size: 10pt; font-family: Verdana; background-color: silver;font-weight: bold;"> Requirement</td>
<td style="width: 100px; font-size: 10pt; font-family: Verdana; background-color: silver;font-weight: bold;"> Location</td>
<td style="width: 100px; font-size: 10pt; font-family: Verdana; background-color: silver;font-weight: bold;"> Experience</td>
<td style="width: 100px; font-size: 10pt; font-family: Verdana; background-color: silver;font-weight: bold;"> Salary</td>
</tr>
<tr>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
1
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
ASP.NET
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
Mumbai
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
1 Year
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
260000 P.A.
</td>
</tr>
<tr>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
2</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
JAVA</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
Kolkata
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
Fresher
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
100000 P.A.
</td>
</tr>
</table>
<asp:Button ID="OkButton" runat="server" Text="OK" />
</p>
</div>
</asp:Panel>
Description:
<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="LinkButton1" DropDownControlID="Panel1">
</cc1:DropDownExtender>
Here TargetControlID is "LinkButton1" in which DropDown is needed(this control will work as DropDown).DropDownControlID is "Panel1" which will be display as the dropdown.
Run the project
When you click on the show job id LinkButton then Panel1 will display as dropdown.
When you click ok button then opened dropdown will close.
Leave Comment